<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common/taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">	
		<title>TzMarlon</title>
		<%@include file="../common/common.jsp" %>
	</head>
	<body style="background:url(${basePath}/resources/images/bg2.jpg)">
		<!--头部-->
		<%@include file="../common/header.jsp" %>
	 	<div class="clearfix"></div>
		<!-- 内容区 -->
		<div class="wrapbox">
			 <div class="w_left">
			 	<!-- 内容区域 -->
			 	<div class="cntbox">
			 		<ul id="databox">
			 			<c:forEach items="${articles}" var="article">
			 			<li class="items">
							<a href="${basePath}/article/detail/${article.id}.do" class="imgbox pr">
							<img class="lazy" alt="#" src="${basePath}/${article.headpic}" style="display: inline;" />
							<div class="iover"></div>
							</a>
							<div class="slbox">
							<h3 class="title"><a href="${basePath}/article/detail/${article.id}.do">${article.title}</a></h3>
							<p class="info">
								<span>作者：${article.username}</span>
								<span>${article.createTime}<i class="iconfont"></i></span>
								<span>${article.comments}<i class="iconfont icon-dianping"></i></span>
								<span>${article.hits}<i class="iconfont icon-hit"></i></span>
							</p>
							<p style="text-indent:2em;">${fn:substring(article.content, 0, 110)}...<a class="read" href="${basePath}/article/detail/${article.id}.do">阅读全文</a></p>
							</div>
						</li>
			 			</c:forEach>
			 		</ul>
			 		<div class="clearfix"></div><!--清除浮动  -->
			 		<!-- 加载按钮 -->
				 	<div class="loadmore"><a href="javascript:void(0);" onclick=""><i class="iconfont icon-refresh"></i><span class="text">加载更多数据</span></a></div>
			 	</div>
			 </div>
			 
			 <!-- 右侧 -->
			 <div class="w_right">
			 	<div class="topic-title">
		            <h2 class="pull-left fl">热门文章</h2>
		            <span class="pull-right fr">3人文章</span>
		        </div>
				 <div class="bg_pic pr">
				 	<div class="iover"></div>
			 		<div><img src="${basePath}/resources/images/cover1.jpg" width="360" height="190"/></div>
			 	</div>
			 	<style>
			 	.topic-content{margin-top:20px;padding:15px 0px 10px 15px;background:rgba(255,255,255,0.86);height:300px;}
			 	</style>
			 	<!-- 热门文章 -->
			 	<div class="topic-content">
			 		<ul class="topic-box">
			 			<li class="items"><a href="javascript:void(0)">我爱技术</a></li>
				 		<li class="items"><a href="javascript:void(0)">Javascript设计模式</a></li>
				 		<li class="items"><a href="javascript:void(0)">这里是你我的平台</a></li>
				 		<li class="items"><a href="javascript:void(0)">我爱你们</a></li>
			 		</ul>
		        </div>
			 </div>
		</div>
		<div class="clearfix"></div>
		<!-- end 内容区 -->
		<%@include file="../common/footer.jsp" %>
		<!--底部-->
	</body>
</html>